<% layout('/layouts/default.html', {title: '室温数据表管理', libs: ['dataGrid']}){ %>
<style>
	#main{
		float: left;
		width: 100%;
		height: 500px;
		background: #fff;
	}
</style>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa icon-notebook"></i> ${text('设备数据分析')}
			</div>
			<div class="box-tools pull-right">
				<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
			</div>
		</div>
		<div class="box-body">
			<#form:form id="searchForm" model="${abData}" action="${ctx}/ab/abData/listData" method="post" class="form-inline"
			data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
			<div class="form-group">
				<label class="control-label">${text('行政区域')}：</label>
				<div class="control-inline">
					<#form:treeselect id="areaId" title="${text('区域选择')}"
					path="areaId" labelPath=""
					url="${ctx}/sys/area/treeData" allowClear="true"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">${text('供热公司部门')}：</label>
				<div class="control-inline">
					<#form:treeselect id="officeId" title="${text('机构选择')}"
					path="officeId" labelPath=""
					url="${ctx}/sys/office/treeData" allowClear="true"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">${text('小区楼宇')}：</label>
				<div class="control-inline">
					<#form:treeselect id="floorId" title="${text('楼宇选择')}"
					path="floorId" labelPath=""
					url="${ctx}/ab/abFloorTree/treeData" allowClear="true"/>
				</div>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
				<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
			</div>
		</#form:form>

		<!-- 饼图 -->
		<div class="content">
			<div id="main"></div>
		</div>

		<table id="dataGrid"></table>
		<div id="dataGridPage"></div>
	</div>
</div>
</div>
<% } %>
<script>
	// 初始化DataGrid对象
	$('#dataGrid').dataGrid({
		searchForm: $("#searchForm"),
		columnModel: [
			{header:'${text("用户名")}', name:'name', index:'a.name', width:150, align:"left"},
			{header:'${text("供热公司部门")}', name:'companyName', index:'a.company_name', width:150, align:"left"},
			{header:'${text("行政区域")}', name:'areaName', index:'a.area_name', width:150, align:"left"},
			{header:'${text("小区楼宇")}', name:'floorName', index:'a.floor_name', width:150, align:"left"},
			{header:'${text("测温id")}', name:'equipNo', index:'a.equip_no', width:150, align:"left"},
			{header:'${text("当前温度")}', name:'inValue', index:'a.in_value', width:150, align:"right", formatter: function(val, obj, row, act){
					return js.formatNumber(val, 2, false, ''); // 数值类型格式化 (原始数值, 小数位数, 是否千分位, 默认值，金额情况下设置0.00);
				}},
			{header:'${text("室外温度")}', name:'outValue', index:'a.out_value', width:150, align:"right", formatter: function(val, obj, row, act){
					return js.formatNumber(val, 2, false, ''); // 数值类型格式化 (原始数值, 小数位数, 是否千分位, 默认值，金额情况下设置0.00);
				}},
			{header:'${text("上传时间")}', name:'createTime', index:'a.create_time', width:150, align:"center"},
			{header:'${text("操作")}', name:'actions', width:120, sortable:false, title:false, formatter: function(val, obj, row, act){
					var actions = [];
				<% if(hasPermi('ab:abData:edit')){ %>
						actions.push('<a href="${ctx}/ab/abData/form?dateCode='+row.dateCode+'" class="btnList" title="${text("编辑室温数据表")}"><i class="fa fa-pencil"></i></a>&nbsp;');
						actions.push('<a href="${ctx}/ab/abData/delete?dateCode='+row.dateCode+'" class="btnList" title="${text("删除室温数据表")}" data-confirm="${text("确认要删除该室温数据表吗？")}"><i class="fa fa-trash-o"></i></a>&nbsp;');
					<% } %>
					return actions.join('');
				}}
		],
		// 加载成功后执行事件
		ajaxSuccess: function(data){

		}
	});
</script>

<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图表的配置项和数据
	option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c} ({d}%)"
		},
		legend: {
			orient: 'vertical',
			left: '10%',
			top:'12%',
			data: ['未注册','未通讯','频繁上数','低温（小于9℃） ','中低温（9℃-18℃）','常温（18℃-26℃）','高温（26℃-35℃）','高温故障（大于35℃）','已注册'],
			selected: {
				'未注册' : false,
				//不想显示的都设置成false
			}

		},
		series: [
			{
				name:'数据分析',
				type:'pie',
				selectedMode: 'single',
				radius: [0, '50%'],
				label: {
					normal: {
						position: 'outside',textStyle:{fontSize:"0%"}
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data:[

					{
						value:5330,
						name:'未注册',
						itemStyle:{
							normal:{
								color:'#b2b2b2'
							}
						}
					},
					{
						value:63,
						name:'未通讯',
						selected:false,
						itemStyle:{
							normal:{
								color:'#95caf5'
							}
						}
					},

					{
						value:0,
						name:'频繁上数',

						itemStyle:{
							normal:{
								color:'#fcad6b'
							}
						}
					},
					{
						value:0,
						name:'低温（小于9℃） ',
						itemStyle:{
							normal:{
								color:'#4bbfee'
							}
						}
					},
					{
						value:0,
						name:'中低温（9℃-18℃）',
						itemStyle:{
							normal:{
								color:'#6da0fa'
							}
						}
					},
					{
						value:587,
						name:'常温（18℃-26℃）',
						itemStyle:{
							normal:{
								color:'#41d47b'
							}
						}
					},
					{
						value:21,
						name:'高温（26℃-35℃）',
						itemStyle:{
							normal:{
								color:'#f5c22d'
							}
						}
					},
					{
						value:0,
						name:'高温故障（大于35℃）',
						itemStyle:{
							normal:{
								color:'#fc0d1b'
							}
						}
					}
				]
			},
			{
				name:'注册比例',
				type:'pie',
				radius: ['60%', '85%'],

				data:[
					{
						value:5330, name:'未注册',
						itemStyle:{
							normal:{
								color:'#b2b2b2'
							}
						}
					},
					{
						value:671, name:'已注册',
						itemStyle:{
							normal:{
								color:'#30dbc9'
							}
						}
					}
				]
			}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	myChart.on('click', function (params) {
		if (params.componentType === 'series') {
			if (params.seriesType === 'pie') {
				if (params.name == '未注册' ||
						params.name == '已注册'   ||
						params.name == '未通讯'   ||
						params.name == '频繁上数'){
					$("#listtype").val(params.name);
					$("#submit").submit();
				}
				else if( params.name == '高温故障（大于35℃）'){
					$("#listtype").val('高温故障');
					$("#submit").submit();
				}
				else if( params.name == '高温（26℃-35℃）'){
					$("#listtype").val('高温');
					$("#submit").submit();
				}
				else if( params.name == '常温（18℃-26℃）'){
					$("#listtype").val('常温');
					$("#submit").submit();
				}
				else if( params.name == '中低温（9℃-18℃）'){
					$("#listtype").val('中低温');
					$("#submit").submit();
				}
				else if( params.name == '低温（小于9℃） '){
					$("#listtype").val('低温');
					$("#submit").submit();
				}
				else {
					// 点击到了 graph 的 node（节点）上。
				}
			}
		}

	});
</script>